src/pages/home/components/HomeDreamer.tsx (1)

41-47: 접근성 개선: <div onClick> 대신 <Link> 또는 <button> 사용 권장
src/common/Header.tsx(26)에서 ‘/community’ 경로가 이미 정의되어 있어 의도한 목적지와 일치합니다; HomeDreamer.tsx(43)에서 클릭 가능한 요소를 <Link to="/community"> 또는 <button>으로 교체하세요.

src/common/CheckList.tsx (1)

75-86: Amplitude 이벤트명과 로그 메시지 불일치

track은 'todo_create'로 보내는데, console.log는 'todo_create_attempt'로 기재되어 있습니다. 디버깅 혼선을 줄이려면 일치시키는 것이 좋습니다.

다음과 같이 수정 제안드립니다.

-        console.log('Amplitude event sent: todo_create_attempt (inpage)');
+        console.log('Amplitude event sent: todo_create (inpage)');

src/pages/community/components/CommunityLeftSide.tsx (3)

56-59: onError 폴백 처리 제안

src에 falsy가 아닌 잘못된 URL이 올 경우를 대비해 onError로 폴백 이미지를 강제하는 편이 안전합니다.

-                  <img
-                    src={item.imageUrl || BaseImage}
+                  <img
+                    src={item.imageUrl || BaseImage}
+                    onError={(e) => ((e.currentTarget.src = BaseImage))}
                     alt="프로필이미지"

---

63-67: 말줄임 텍스트 힌트 제공

truncate 적용은 좋습니다. 전체 내용을 title 속성으로 노출하면 접근성과 가독성이 개선됩니다.

-                      <div className="w-[170px] min-w-0 flex-1 truncate text-black font-B01-SB">
-                        {item.description}
-                      </div>
+                      <div
+                        className="w-[170px] min-w-0 flex-1 truncate text-black font-B01-SB"
+                        title={item.description}
+                      >
+                        {item.description}
+                      </div>

---

49-51: 리스트 행 전체 클릭 네비게이션 — 라우트 확인 완료 및 접근성 보완 권장
navigate(/otherslist/${item.id}) 호출은 src/route/Router.tsx:72의 path="/otherslist/:todoGroupId" 경로와 일치함을 확인했습니다. div 대신 <Link>/<button> 사용 또는 role="button" + onKeyDown(Enter/Space) 핸들러를 추가해 키보드 접근성을 보완하세요.

src/pages/home/components/HomeRecruit.tsx (4)

14-33: 로컬 RecruitData 중복 정의 → 공용 DTO로 통합 제안

API 응답 형태를 컴포넌트 내부에서 재정의하면 드리프트가 발생하기 쉽습니다. validation/recruit 혹은 hook 단의 타입/스키마로 승격하여 단일 출처(SOT)로 관리하세요.

원하시면 기존 스키마(RecruitItem)와 매핑되는 DTO 타입 파일로 분리하는 PR 보조 패치를 드릴 수 있습니다.

---

39-41: 모달 종료 시 선택 상태 정리

닫기 시 selectedCard도 null로 리셋하면 메모리/상태 일관성이 좋아집니다.

-            onClose={() => {
+            onClose={() => {
               console.log('Closing modal');
               setIsModalOpen(false);
+              setSelectedCard(null);
             }}

---

73-80: 디버그 로그 제거 제안

남아있는 console.log는 배포 전에 정리하는 것이 좋습니다.

-  console.log('Card clicked:', data);
   const recruitItem = convertToRecruitItem(data);
-  console.log('Converted item:', recruitItem);
   setSelectedCard(recruitItem);
   setIsModalOpen(true);
-  console.log('Modal should open');

---

160-170: 모달 접근성 개선(포커스 트랩/스크롤 락)

오버레이는 잘 동작합니다. 다만 포커스 트랩, ESC 닫기, body 스크롤 락을 추가하면 접근성이 개선됩니다. Modal 컴포넌트를 재사용한다면 그 내부에서 처리하는 것을 권장합니다.

src/pages/otherTodoList/components/OtherTodoCard.tsx (4)

111-114: 리스트 key에 index 사용 지양

item.todoId처럼 안정적인 고유값을 key로 사용하세요. 재정렬/추가/삭제 시 예기치 못한 재사용을 방지합니다.

-            <li
-              key={index}
+            <li
+              key={item.todoId}

---

145-155: 변경 중 비활성화 및 시각적 상태 제공

요청 중에는 버튼을 비활성화하여 중복 클릭을 방지하세요. aria-busy로 상태 전달도 가능합니다.

-                <button
+                <button
                   type="button"
-                  onClick={() => toggleAdd(item.todoId, isAdded)}
+                  onClick={() => toggleAdd(item.todoId, isAdded)}
+                  disabled={isMutating}
                   className={
                     isAdded
-                      ? 'p-2 text-purple-500 font-B03-SB'
-                      : 'flex items-center justify-center rounded-[10px] bg-purple-500 p-2 text-purple-50 font-B03-SB'
+                      ? 'p-2 text-purple-500 opacity-80 disabled:opacity-50 font-B03-SB'
+                      : 'flex items-center justify-center rounded-[10px] bg-purple-500 p-2 text-purple-50 disabled:opacity-50 font-B03-SB'
                   }
                 >

---

137-144: saveCount 즉시 반영 여부 확인

invalidate로 새로고침되면 OK입니다. 실시간 반영이 필요하면 낙관적 업데이트로 saveCount를 +1/-1 조정하는 방법도 있습니다.

---

162-170: 토스트 접근성(스크린리더) 개선

aria-live="polite"와 role="status"를 부여하면 화면 읽기 프로그램에서 상태 변화를 인지할 수 있습니다.

-        <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          role="status"
+          aria-live="polite"
+        >

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

src/hook/community/query/useGetHotPopularQuery.ts (3)

14-15: todoGroupId 필수 추가 — API 스키마/소비처 정합성 확인 권장

현재 queryFn에서 런타임 검증 없이 서버 응답을 신뢰하므로, 서버가 todoGroupId를 누락하면 undefined가 UI로 흘러갈 수 있습니다. 또, 커뮤니티 HOT 리스트는 여전히 item.id로 네비게이션한다고 하니, todoGroupId의 실제 사용 목적(그룹 ID vs 아이템 ID)을 확인해 주세요. 스키마가 아직 확정되지 않았다면 임시로 optional 처리하거나 런타임 파싱(예: Zod)으로 보장하는 방식을 권장합니다.

선택지 A(임시 완충):

-  todoGroupId: number;
+  todoGroupId?: number;

원하시면 Zod 스키마/파싱 코드도 제안해 드릴게요.

---

26-35: 응답 제네릭/검증 적용으로 침묵 실패 방지

비정상 응답 시 빈 배열을 반환하면 장애가 가려질 수 있습니다. Axios 제네릭과 간단한 형태 검증으로 에러를 명시적으로 터뜨려 React Query의 에러 플로우를 타도록 하는 것을 권장합니다.

-  return useQuery<HotPopularItem[]>({
+  return useQuery<HotPopularItem[], Error>({
     queryKey: ['hotPopular', selectedJobName],
     enabled: !!selectedJobName,
     queryFn: async () => {
-      const res = await api.get('/v1/community/todos/popular', {
+      const { data } = await api.get<HotPopularApiResponse>('/v1/community/todos/popular', {
         params: { jobName: selectedJobName },
       });
-      const body = res.data as HotPopularApiResponse;
-      return Array.isArray(body?.data) ? body.data : [];
+      if (!Array.isArray(data?.data)) {
+        throw new Error('Invalid response shape: /v1/community/todos/popular');
+      }
+      return data.data;
     },
     staleTime: 1000 * 60 * 5,
     refetchOnWindowFocus: false,
   });

---

5-10: imageUrl null 가능성 확인 및 타입 정합성

관련 스키마에서 프로필 이미지가 nullable로 바뀐 맥락이 있습니다. 이 데이터 소스가 동일하다면 imageUrl도 null이 들어올 수 있으니 타입/소비처 정합성을 확인해 주세요. 필요 시 다음과 같이 확장하거나, 소비 측에서 폴백을 적용하세요.

-  imageUrl: string;
+  imageUrl: string | null;

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

src/pages/jobDetail/components/TabContent/TreeContents.tsx (1)

29-31: 타이머 정리 누락 가능성

언마운트 시 타이머 클린업을 추가하세요. Sprout 코멘트와 동일 방식으로 처리 권장.

src/pages/otherTodoList/components/OtherTodoCard.tsx (1)

37-72: 중복 요청 방지 및 타임아웃 클린업

이전 코멘트와 동일하게 isPending 기반 비활성화와 타이머 클린업을 적용하세요. 연속 클릭 시 서버에 중복 요청이 갈 수 있습니다.

src/utils/amplitude.ts (6)

9-11: SSR 안전성 및 전역 참조 일관화: window.location 사용 권장

location.pathname 대신 window.location.pathname을 사용해 전역 참조를 명시적으로 하고, SSR 가드와의 일관성을 맞추세요.

-    const currentPath = location.pathname;
+    const currentPath = window.location.pathname;

---

12-21: source_page 값 표준화 및 누락 라우트 보완

Sprout/Tree 컴포넌트는 보통 jobDetail 경로에서 호출됩니다. 현재 매핑은 '/jobinfo'만 커버하여 동일 기능이 페이지에 따라 'jobinfo/' vs '/jobDetail/...'로 섞여 기록될 수 있습니다. 측정 일관성을 위해 jobDetail도 명시 매핑하고, 슬래시/대소문자 규칙을 통일하세요.

-    if (currentPath.includes('/community')) {
+    if (currentPath.includes('/community')) {
       sourcePage = 'community/';
-    } else if (currentPath.includes('/jobinfo')) {
+    } else if (currentPath.includes('/jobinfo')) {
       sourcePage = 'jobinfo/';
+    } else if (currentPath.includes('/jobdetail')) {
+      sourcePage = 'jobdetail/';
     } else if (currentPath.includes('/otherslist')) {
       sourcePage = 'otherslist/';
     } else {
       sourcePage = currentPath;
     }

---

23-28: 이벤트 시맨틱 불일치: source_method 'copy_btn' → 실제는 추가 버튼

현재 이벤트는 '내 할일에 추가' 흐름인데 source_method가 copy_btn으로 기록됩니다. 분석 혼선을 피하려면 메서드 값을 교정하거나, 클릭/성공 이벤트를 구분해 기록하세요.

-      source_method: 'copy_btn',
+      source_method: 'add_btn',

대안: 클릭 시 'todo_import_click', 성공 시 'todo_import_success'를 따로 보내는 패턴으로 분리.

---

23-28: 분석 식별자 확장: todo_id 전달 고려

길이(todo_length)만으로는 항목 식별이 불가능합니다. 개인정보 노출을 피하면서도 분석 품질을 높이려면 ID를 추가 파라미터로 전달하는 형태로 유틸 시그니처를 확장하는 것을 권장합니다.

예:

-export const trackTodoImport = (todoTitle: string) => {
+export const trackTodoImport = (todoTitle: string, options?: { todoId?: number }) => {
...
-    window.amplitude.track('todo_import', {
+    window.amplitude.track('todo_import', {
       source_method: 'add_btn',
       source_page: sourcePage,
       todo_length: todoTitle.length,
+      todo_id: options?.todoId,
       timestamp: new Date().toISOString(),
     });

호출부에서 ID가 있는 경우 함께 전달.

---

29-30: prod 콘솔 노이즈 제거

프로덕션에서 불필요한 콘솔 출력은 지양하세요. 빌드 환경 변수로 가드하거나 로그를 제거해 주세요.

-    console.log('Amplitude event sent: todo_import');
+    if (process.env.NODE_ENV !== 'production') {
+      console.log('Amplitude event sent: todo_import');
+    }

---

3-8: window.amplitude 타입 선언 누락 가능성

window.amplitude는 기본 DOM 타입에 없어서 TS 에러가 날 수 있습니다. 글로벌 선언을 추가해 타입을 명시하세요.

아래를 본 파일 최상단(또는 .d.ts) 어딘가에 추가:

declare global {
  interface Window {
    amplitude?: { track: (event: string, props?: Record<string, any>) => void };
  }
}
export {};

src/pages/jobDetail/components/TabContent/SproutContent.tsx (3)

21-33: 이벤트는 성공 시점에 기록

현재 클릭 직후에 추적하고 있어 실패 케이스도 성공으로 집계됩니다. onSuccess에서 트래킹하도록 이동하거나, 클릭/성공을 분리 이벤트로 기록하세요.

-  const handleAdd = (jobTodoId: number, title: string) => {
+  const handleAdd = (jobTodoId: number, title: string) => {
     if (completedId.has(jobTodoId)) return;

     setClickedId(jobTodoId);
-    trackTodoImport(title); // Amplitude 이벤트 트래킹
     mutate(jobTodoId, {
       onSuccess: () => {
+        trackTodoImport(title); // 성공 시점 트래킹
         setCompletedId((prev) => new Set(prev).add(jobTodoId));
         setShowToast(true);
         setTimeout(() => setShowToast(false), 2000);
       },
       onSettled: () => setClickedId(null),
     });
   };

---

29-31: 타이머 정리 누락 가능성

언마운트 시 setTimeout 클린업이 없어 메모리/경고 가능성이 있습니다. ref로 타이머를 보관하고 useEffect cleanup에서 정리하세요.

추가 코드(컴포넌트 상단에):

const toastTimerRef = useRef<number | null>(null);

변경:

- setTimeout(() => setShowToast(false), 2000);
+ toastTimerRef.current = window.setTimeout(() => setShowToast(false), 2000);

클린업:

useEffect(() => () => {
  if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
}, []);

---

8-11: 미사용 prop 정리

SproutContentProps의 jobId가 사용되지 않습니다. 불필요한 prop은 제거해 인터페이스를 단순화하세요.

src/pages/jobDetail/components/TabContent/TreeContents.tsx (1)

21-33: 이벤트는 성공 시점에 기록

Sprout과 동일하게 성공 시점에 기록하도록 이동하세요.

-    trackTodoImport(title); // Amplitude 이벤트 트래킹
     mutate(jobTodoId, {
       onSuccess: () => {
+        trackTodoImport(title); // 성공 시점 트래킹
         setCompletedId((prev) => new Set(prev).add(jobTodoId));
         setShowToast(true);
         setTimeout(() => setShowToast(false), 2000);
       },

src/pages/community/components/CommunityContents.tsx (2)

69-70: 이벤트 시점 조정 또는 이벤트명 분리

추가 성공 전 트래킹되어 실패 건도 성공으로 집계됩니다. onSuccess에서 호출하거나, 클릭/성공 이벤트를 분리하세요.

-      trackTodoImport(todoTitle); // Amplitude 이벤트 트래킹
+      // onSuccess 내부로 이동 권장 또는 별도 'todo_import_click' 이벤트로 분리

---

136-144: 긴 본문(description) 대신 짧은 식별자 사용 검토

todoTitle로 post.description을 전달하면 길이 측정이 과대 기록될 수 있습니다. 제목(post.name) 또는 앞부분만 사용하도록 재검토하세요.

- onClick={() => toggleAdd(post.id, isAdded, post.description)}
+ onClick={() => toggleAdd(post.id, isAdded, post.name)}

src/pages/otherTodoList/components/OtherTodoCard.tsx (3)

149-157: 이벤트는 성공 시점에 기록

성공/실패를 구분하려면 onSuccess에서 트래킹하거나 이벤트를 분리하세요.

-      trackTodoImport(todoTitle); // Amplitude 이벤트 트래킹
       addTodoMutation.mutate(
         { id },
         {
           onSuccess: () => {
+            trackTodoImport(todoTitle); // 성공 시점 트래킹
             setShowToast(true);

---

114-116: 리스트 key에 index 사용 지양

index key는 추가/삭제 토글 시 잘못된 재사용을 유발할 수 있습니다. 고유 ID를 사용하세요.

-              key={index}
+              key={item.todoId}

---

118-124: 클릭 가능 UI와 동작 불일치

체크 박스 영역에 cursor-pointer가 있으나 onClick 동작이 없습니다. UX 혼선을 피하려면 포인터 제거 또는 클릭 동작을 추가하세요.

-                  className={`flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-[8px] border ${
+                  className={`flex h-[30px] w-[30px] items-center justify-center rounded-[8px] border ${

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro